<template>
    <Card dis-hover :bordered="false">
        <Form inline>
            <FormItem v-width="200">
                <Input placeholder="请输入手机号" />
            </FormItem>
            <FormItem v-width="100">
                <Select placeholder="线索状态" filterable clearable>
                    <Option value="新数据">新数据</Option>
                    <Option value="未联系上">未联系上</Option>
                    <Option value="无效">无效</Option>
                    <Option value="转客户">转客户</Option>
                </Select>
            </FormItem>
            <FormItem>
                <DatePicker :editable="false" type="daterange"></DatePicker>
            </FormItem>
        </Form>
        <div class="i-table-no-border">
            <Table highlight-row ref="table" :columns="columns" :loading="loading" :data="data">
                <template slot-scope="{row}" slot="status">
                    <Tag v-if="row.status === 0" color="primary">未联系上</Tag>
                    <Tag v-else-if="row.status === 1" color="success">转客户</Tag>
                    <Tag v-else-if="row.status === 2" color="default">无效</Tag>
                    <Tag v-else color="warning">新数据</Tag>
                </template>
                <template slot-scope="{row}" slot="info">
                    <span v-if="row.status === 1" class="person">高玲玲</span>
                    <a href="javaScript:;" v-else @click="handleContactClue">联系</a>
                </template>
            </Table>
            <div class="ivu-mt ivu-text-center">
                <Page
                    show-total
                    show-elevator
                    show-sizer
                    :total="total"
                    :current.sync="params.page"
                    :page-size="params.pageSize"
                    :page-size-opts="pageOpts"
                    @on-change="formSize"
                    @on-page-size-change="formChangePage"
                />
            </div>
            <Modal ref="contact" title="联系患者" v-model="contactClue" :mask-closable="false" width="650">
                <DescriptionList :col="2">
                    <Description term="基本信息：">刘丹 女 21岁</Description>
                    <Description term="联系方式：">13566585658 | li0568</Description>
                </DescriptionList>
                <DescriptionList :col="1">
                    <Description term="市场备注：">活动转化购买小光疗</Description>
                </DescriptionList>
                <Row :gutter="16">
                    <Col span="8">
                        <img style="width:100%" src="https://dev-file.iviewui.com/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo/middle" />
                    </Col>
                    <Col span="8">
                        <img style="width:100%" src="https://dev-file.iviewui.com/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd/middle" />
                    </Col>
                    <Col span="8">
                        <img style="width:100%" src="https://dev-file.iviewui.com/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ/middle" />
                    </Col>
                </Row>
                <Divider></Divider>
                <Form label-position="top" :model="contactData">
                    <Row>
                        <Col span="12">
                            <FormItem label="联系结果">
                                <RadioGroup v-model="contactData.state">
                                    <Radio label="无效"></Radio>
                                    <Radio label="未联系上"></Radio>
                                    <Radio label="转客户"></Radio>
                                </RadioGroup>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem v-if="contactData.state === '无效' || contactData.state === '未联系上'" label="备注">
                                <Input placeholder="请备注原因" />
                            </FormItem>
                            <FormItem v-if="contactData.state === '转客户'" label="下次回访时间">
                                <Row :gutter="16">
                                    <Col span="4">
                                        <Input v-model="contactData.input1" />
                                    </Col>
                                    <Col span="4">天后</Col>
                                    <Col span="16">
                                        <DatePicker :editable="false" type="date" placeholder="请输入回访时间"></DatePicker>
                                    </Col>
                                </Row>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        </div>
    </Card>
</template>

<script>
export default {
    /*  import引入的组件注入到components对象中使用  */
    components: {},
    name: "market",
    data() {
        return {
            total: 0, //  分页总数
            pageOpts: [10, 20, 30, 50], //  分页每页数量
            params: { page: 1, pageSize: 10 }, //  请求参数
            edit: true, //  编辑true,新增false
            loading: false, //  加载中
            modal: false, //  模态框开启属性
            contactClue: false,
            modalname: 'formItem',
            contactData: {
                state: '转客户',
                input: ''
            },
            grid: { xl: 4, lg: 8, md: 12, sm: 24, xs: 24 }, //  layout布局
            columns: [
                {
                    title: '基本信息',
                    key: 'name',
                    minWidth: 138,
                    fixed: 'left'
                },
                {
                    title: '手机号',
                    key: 'phone',
                    width: 130
                },
                {
                    title: '微信号',
                    key: 'wechat',
                    width: 130
                },
                {
                    title: '备注',
                    key: 'remarks',
                    minWidth: 200
                },
                {
                    title: '线索状态',
                    slot: 'status',
                    width: 100
                },
                {
                    title: '医院',
                    key: 'hospital',
                    minWidth: 150
                },
                {
                    title: '医生',
                    key: 'doctor',
                    width: 100
                },
                {
                    title: '录入人员',
                    key: 'person',
                    width: 138
                },
                {
                    title: '录入时间',
                    key: 'time',
                    minWidth: 138
                },
                { title: '操作', slot: 'info', width: 90 }
            ], // 列表表头
            data: [
                {
                    name: '黄涛 男 21',
                    remarks: '活动患者带小朋友',
                    time: '2020-07-06 16:03',
                    person: '张少强',
                    phone: '13655685586',
                    hospital: '合肥人民医院',
                    doctor: '刘医生',
                    wechat: 'bbgj21565',
                    addTime: '2020-07-03 12:03',
                    status: 1
                },
                {
                    name: '红玉 女 26',
                    remarks: '活动患者带小朋友',
                    time: '2020-07-06 16:03',
                    phone: '13655685586',
                    hospital: '合肥省立医院',
                    doctor: '张志强',
                    wechat: 'bbgj21565',
                    person: '张少强',
                    addTime: '2020-07-03 12:03',
                    status: 2
                }
            ], // 列表数据
            formItem: { name: '黄旗' }, // 模态框数据
            createRules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ]
            } // 模态框验证规则
        }
    },
    /* 监听属性 类似于data概念 */
    computed: {},
    watch: {},
    /* 创建完成能访问this实例 */
    created() {},
    /* 函数方法集合 */
    methods: {
        /* @函数功能: 初始化 */
        initial() {
            this.askData()
        },
        /* @函数功能: 请求数据 */
        askData() {},
        /* @函数功能: 分页 */
        formSize(e) {
            this.params.page = e
            this.askData()
        },
        /* @函数功能: 每页数量 */
        formChangePage(e) {
            this.params.pageSize = e
            this.askData()
        },
        // 联系线索客户
        handleContactClue() {
            this.contactClue = true
        }
    },
    /* 挂载完成能访问DOM元素 */
    mounted() {
        this.initial()
    },
    /* 创建之前 */
    beforeCreate() {},
    /* 挂载之前 */
    beforeMount() {},
    /* 更新之前 */
    beforeUpdate() {},
    /* 更新之后 */
    updated() {},
    /* 销毁之前 */
    beforeDestroy() {},
    /* 销毁完成 */
    destroyed() {},
    /* 有keep-alive缓存即会触发 */
    activated() {}
}
</script>

<style lang='less' scoped>
</style>
